<script setup lang="ts">
import Plyr from 'plyr';
import { onMounted, ref, type CSSProperties } from 'vue';
import 'plyr/dist/plyr.css';

const props = defineProps<{
    src: string;
    poster?: string;
    style?: CSSProperties
}>();

const video = ref();

onMounted(() => {
    new Plyr(video.value);
});

</script>

<template>
    <div :style="style">
        <video ref="video" :src="props.src" :poster="props.poster" preload="none" controls
            style="height: 100%;"></video>
    </div>
</template>

<style lang="scss" scoped>
:deep(.plyr--video) {
    height: 100%;
}

:deep(.plyr__controls) {
    padding-top: 0;
}

:deep(.plyr) {
    min-width: unset;
}
</style>